<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- 头像-姓名-职业等 -->
    <view class="w-646rpx m-a flex-sb-center pt-68rpx">
      <base-img-box 
        v-if="user.userInfo.matchmakerFlag"
        :size="138" 
        :round="138" 
        :imgSrc="user.matchmakerInfo && user.matchmakerInfo.photoUrl" 
        :thumbnailPreUrl="user.matchmakerInfo && user.matchmakerInfo.thumbnailPreUrl"
      />
      <base-img-box 
        :size="138" 
        :round="138" 
        :imgSrc="user.getUseVo.personAvatar && user.getUseVo.personAvatar.preUrl" 
        :thumbnailPreUrl="user.getUseVo.personAvatar && user.getUseVo.personAvatar.thumbnailPreUrl"
        v-else
      />
      <view class="w-340rpx">
        <view class="ellipsis font-size-40rpx blod" v-if="user.isLogined">
          {{ 
            user.userInfo.matchmakerFlag 
              ? user.matchmakerInfo.name
              : userProfileInfoVo.nickname || '未完善资料'
          }}
        </view>
        <view class="ellipsis font-size-40rpx blod" v-else @click="handleLogin">
          点击登录
        </view>
        <view class="ellipsis font-size-28rpx mt-36rpx">
          {{ 
            user.userInfo.matchmakerFlag 
              ? user.matchmakerInfo.expertise
              : userProfileInfoVo.professionName || '--' 
          }}
        </view>
      </view>
      <!-- @click="toPath({ path: '/feature/likeList?type=viewed' })" -->
      <view class="w-120rpx font-size-24rpx h-138rpx">
        <!-- <view class="mt-38rpx"><text class="font-size-46rpx">{{ behaviorInfo.viewedNum || 0 }}</text>次</view>
        <view class="mt-4rpx">看过我的</view> -->
      </view>
    </view>

    <!-- 列表导航 -->
    <view class="w-626rpx m-a mt-44rpx flex-sb-center">
      <view class="w-140rpx font-size-24rpx" 
        v-for="item in enumParams.chatList" 
        :key="item.value"
        @click="toPath({ path: '/feature/likeList?type=' + item.type })"
      >
        <view><text class="font-size-46rpx">{{ behaviorInfo[item.value] || 0 }}</text>次</view>
        <view class="mt-4rpx">{{ item.label }}</view>
      </view>
    </view>

    <!-- 免费发布征婚资料 -->
    <view class="btn-full w-center pt-28rpx">
      <wd-button 
        class="btn-w-full btn-h-78"
        @click="toPath({ path: '/activity/info' })"
      >免费发布征婚资料</wd-button>
      
      <!--  #ifdef H5 -->
      <!-- <wd-button 
        class="btn-w-full btn-h-78"
        @click="toPath({ path: '/activity/info' })"
      >免费发布征婚资料</wd-button> -->
      <!--  #endif -->

      <!--  #ifdef MP-WEIXIN -->
      <!-- <wd-button 
        v-if="user.userInfo.phone"
        class="btn-w-full btn-h-78"
        @click="toPath({ path: '/activity/info' })"
      >免费发布征婚资料</wd-button>
      <wd-button 
        v-else
        class="btn-w-full btn-h-78"
        @getphonenumber="user.getphonenumber"
        open-type="getPhoneNumber"
      >免费发布征婚资料</wd-button> -->
      <!--  #endif -->
    </view>
    
    <view class="btn-full w-center pt-20rpx">
      <wd-button 
        class="btn-w-full btn-h-78"
        @click="toPath({ path: '/feature/addMatchmaker' })"
      >全民红娘注册入口</wd-button>
    </view>

    <!-- 联系客服/我要打赏 -->
    <view class="w-638rpx m-a mt-20rpx flex-sb-center">
      <view class="btn-w-294 btn-h-96 bg-#FFDDD0 color-#4D4D4D flex-center"
        v-for="(item, index) in enumParams.btnList"
        :key="index"
        @click="toPath(item)"
      >
        <i class="iconfont font-size-36rpx mr-16rpx"
          :class="[item.icon]"
        ></i>
        <text class="font-bold" 
          :style="`font-size: ${item.size}rpx`"
        >{{ item.label }}</text>
      </view>
    </view>

    <!-- 功能导航 -->
    <view class="w-750rpx m-a mt-20rpx pb-32rpx">
      <base-cell 
        v-for="(item, index) in getFeatureList" 
        :key="index" 
        :data="item"
        :desc1="getDesc(item).desc1"
        :desc2="getDesc(item).desc2"
        :desc2Color="getDesc(item).color"
        :leftIcon="item.icon"
        @handleClick="(data) => toPath(data)"
      />
    </view>

    <wd-overlay :show="showOverlay" @click="showOverlay = false">
      <view class="w-550rpx bg-#fff position-center rounded-24rpx" @click.stop="">
        <view class="w-550rpx m-a bg-#f1f1f1 rounded-24rpx font-size-0 overflow-hidden">
          <wd-img 
            width="550rpx" 
            height="792rpx" 
            :round="false" 
            mode="aspectFill"
            :show-menu-by-longpress="true"
            :src="kefu" 
          />
        </view>
        <!-- <view class="color-#999 font-size-24rpx text-center pb-32rpx pt-24rpx">长按识别二维码联系客服</view> -->
      </view>
    </wd-overlay>
    
    <!-- <wd-overlay :show="showOverlay" @click="showOverlay = false">
      <view class="w-464rpx bg-#fff position-center rounded-24rpx" @click.stop="">
        <view class="w-400rpx m-a !mt-32rpx bg-#f1f1f1 rounded-24rpx font-size-0">
          <wd-img 
            width="400rpx" 
            height="576rpx" 
            :round="false" 
            mode="aspectFill"
            :show-menu-by-longpress="true"
            :src="kefu" 
          />
        </view>
        <view class="color-#999 font-size-24rpx text-center pb-32rpx pt-24rpx">长按识别二维码联系客服</view>
      </view>
    </wd-overlay> -->
  </view>
</template>

<script lang="ts" setup>
import BaseCell from "@/components/base/base-cell.vue";
import baseImgBox from "@/components/base/base-img-box.vue";
import { enumParams, kefu, share } from "@/enum/index";
import { useCommonStore, useUserStore } from "@/store";
import { useMessage, useToast } from "wot-design-uni";
import { User } from "@/service/types/user";
import { formatDate, isIOS } from "@/utils";

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const user = useUserStore();
const common = useCommonStore();
const toast = useToast();

onShow(() => {
  user.userInfo.id && user.getUserInfo();
})

// 获取功能列表
const getFeatureList = computed(() => {
  const path = '/feature/vip';
  // const flag = !isIOS() || common.config.typeName === 'true';
  const flag = true;
  
  const chargePath = '/feature/recharge';
  // const chargeFlag = !isIOS() || common.chargeConfig.typeName === 'true';
  const chargeFlag = true;

  return enumParams.featureList.filter(item => {
    if (item.path === path) return flag;
    if (item.path === chargePath) return chargeFlag;
    return true;
  });
})

// 点赞/收藏/浏览/被浏览数
const behaviorInfo = computed((): UserBehaviorInfoStatisticsVo => {
  return user.userInfo.userBehaviorInfoStatisticsVo || {} as UserBehaviorInfoStatisticsVo;
})

// 用户信息
const userProfileInfoVo = computed(() => {
  return user.userInfo.userProfileInfoVo || {} as User.UserProfileInfoVo;
})

const showOverlay = ref(false);
const toPath = (item) => {
  // 联系客服
  if (item.path === '/feature/contact') {
    showOverlay.value = true;
    return 
  }

  // 除了关于我们页面都要登录
  if (!user.isLogined && item.name !== 'about') {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  
  // 实名认证
  if (item.path === '/feature/realName' && user.userInfo.verificationFlag) {
    toast.show('您已认证成功！');
    return
  }

  // if (item.path === '/activity/info' && user.userInfo.matchmakerFlag) {
  //   toast.show('您已注册为红娘,不可再填写资料！');
  //   return
  // }

  // if (item.path === '/feature/addMatchmaker' && userProfileInfoVo.value.nickname) {
  //   toast.show('您已完善资料,不可再注册红娘！');
  //   return
  // }

  uni.navigateTo({ url: item.path })
}

const getDesc = computed(() => {
  return (item) => {
    const { desc1, desc2, icon } = item || {};
    let  _desc1 = desc1;
    let  _desc2 = desc2;
    let color = undefined;
    // 实名认证
    if (icon === 'icon-shenfen') {
      if (user.userInfo.verificationFlag) {
        color = 'green';
        _desc2 = '已认证';
      } else {
        _desc2 = '未认证';
      }
    }
    
    // 登录
    if (icon === 'icon-setting') {
      if (user.isLogined) {
        _desc1 = '';
        _desc2 = '';
      } else {
        _desc2 = '未登录';
      }
    }

    return {
      desc1: _desc1,
      desc2: _desc2,
      color
    }
  }
})

const handleLogin = () => {
  uni.navigateTo({ url: '/pages/login/index' })
  // #ifdef H5
  // uni.navigateTo({ url: '/pages/login/index' })
  // return
  // #endif
  // user.wxLogin();
}

onShareAppMessage(() => {
  const { id = '', userProfileInfoVo } = user.userInfo || {};
  const { partnerRequirements, personalImageryInfoVoList = [] } = userProfileInfoVo || {};
  const firstItem = personalImageryInfoVoList[0] || { fileInfoVo: { preUrl: '' } };
  const _fileInfoVo = firstItem.fileInfoVo || { preUrl: '' };
  
  return {
    title: '我满心期待，与你相遇的未来！',
    path: `/pages/tabbar/index?instrId=${id || ''}`,
    imageUrl: share
  }
})
</script>

<style lang="scss" scoped>
</style>
